<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册用户列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <style>
        .el-header{
            color: #333;
            padding: 11px;
            background: white;
            margin: 0 0 5px 0;
        }
        .el-main {
            color: #333;
            padding: 0;
            background:white;
            text-align: center;
        }
        .setup-color{
            color: #67C23A
        }
        .expired-color{
            color: #E6A23C;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryForm.createTime"
                                type="datetimerange"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                size="medium"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="过期时间">
                        <el-date-picker
                                v-model="queryForm.expirationTime"
                                type="datetimerange"
                                range-separator="至"
                                size="medium"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                align="right">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="initAutoRoleTable">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        :data="autoRoleList"
                        border
                        :header-cell-style="getRowClass"
                        style="width:98%;margin:0 10px;">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="source"
                            label="来源"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            width="110"
                            prop="username"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="当前角色">
                        <template slot-scope="scope">
                            <span :class="scope.row.roleCode == scope.row.setupRoleCode ?'setup-color':scope.row.roleCode == scope.row.expiryRoleCode ?'expired-color':''">{{ scope.row.roleName }}</span>
                            <i v-if="scope.row.roleStatus == 'ON'" class="el-icon-circle-check" style="color:#13ce66;"></i>
                            <i v-if="scope.row.roleStatus == 'OFF'" class="el-icon-circle-close" style="color:#ff4949;"></i>
                            <br/>
                            <span :class="scope.row.roleCode == scope.row.setupRoleCode ?'setup-color':scope.row.roleCode == scope.row.expiryRoleCode ?'expired-color':''">{{ scope.row.roleCode}}</span>

                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="设定角色">
                        <template slot-scope="scope">
                            <span class="setup-color">{{ scope.row.setupRoleName }}</span>
                            <i v-if="scope.row.setupRoleStatus == 'ON'" class="el-icon-circle-check" style="color:#13ce66;"></i>
                            <i v-if="scope.row.setupRoleStatus == 'OFF'" class="el-icon-circle-close" style="color:#ff4949;"></i>
                            <br/>
                            <span class="setup-color">{{ scope.row.setupRoleCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            align="center"
                            label="过期角色">
                        <template slot-scope="scope">
                            <span class="expired-color">{{ scope.row.expiryRoleName }}</span>
                            <i v-if="scope.row.expiryRoleStatus == 'ON'" class="el-icon-circle-check" style="color:#13ce66;"></i>
                            <i v-if="scope.row.expiryRoleStatus == 'OFF'" class="el-icon-circle-close" style="color:#ff4949;"></i>
                            <br/>
                            <span class="expired-color">{{ scope.row.expiryRoleCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="70"
                            prop="status"
                            label="自动化">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 'ON'" style="color: green;">开启</span>
                            <span v-if="scope.row.status == 'OFF'" style="color: red;">关闭</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            width="120"
                            label="创建时间">
                        <template slot-scope="scope">
                            <div v-html="$options.filters.dateTime2DateAndTime(scope.row.createTime)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="expirationTime"
                            label="过期时间"
                            width="120">
                        <template slot-scope="scope">
                            <div v-html="$options.filters.dateTime2DateAndTime(scope.row.expirationTime)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remainingTime"
                        label="剩余时间">
                    </el-table-column>
                    <el-table-column
                            label="是否过期"
                            width="80">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isExpired == 'NO'" style="color: green;">正常</span>
                            <span v-if="scope.row.isExpired == 'YES'" style="color: red;">过期</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="70">
                        <template slot-scope="scope">
                            <el-button type="text" size="medium" v-if="auth.update" @click="openUpdateDialog(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </el-main>
        </el-container>


        <!-- 对话框 修改-->
        <el-dialog title="用户时间调整" :visible.sync="updateDialogVisible" :close-on-click-modal="false">
            <el-form :model="updateForm" label-width="100px">
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="用户名">
                            <el-input v-model="updateForm.username" disabled autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="来源">
                            <el-input v-model="updateForm.source" disabled autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="是否过期">
                            <el-input v-model="updateForm.isExpired" disabled autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="自动化">
                            <el-switch
                                v-model="updateForm.status"
                                active-value="ON"
                                active-color="#13ce66"
                                active-text="开启"
                                inactive-value="OFF"
                                inactive-color="#ff4949"
                                inactive-text="关闭">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="40">
                    <el-col :span="12">
                        <el-form-item label="设定角色">
                            <el-select v-model="updateForm.setupRole" placeholder="请选择">
                                <el-option
                                    v-for="item in roleList"
                                    :key="item.id"
                                    :label="item.roleName"
                                    :value="item.roleCode"
                                    :disabled="item.status == 'OFF'">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="过期角色">
                            <el-select v-model="updateForm.expiryRole" placeholder="请选择">
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.id"
                                        :label="item.roleName"
                                        :value="item.roleCode"
                                        :disabled="item.status == 'OFF'">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="过期时间">
                            <el-date-picker
                                    v-model="updateForm.expirationTime"
                                    type="datetime"
                                    format="yyyy-MM-dd HH:mm"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="选择日期时间"
                                    default-time="12:00:00">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAutoRole">确 定</el-button>
            </div>
        </el-dialog>

    </div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-clipboard2/0.3.3/vue-clipboard.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            queryForm:{},
            roleList:[],

            autoRoleList:[],
            page:{
                page:1,
                pageSize:10,
                total:0
            },

            updateForm:{},
            updateDialogVisible:false,

            auth:{
                menuCode:'auto_role',
                update:false
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate(time){
                    return time >= Date.now();
                }
            }
        },
        created(){
            initAuth(this.auth);
            this.initRoleList();
        },
        mounted(){
            this.initAutoRoleTable();
        },
        methods: {
            initAutoRoleTable(){
                axios.post(domain + "/sysAutoRole/queryAutoRoleByPage",{
                    page:this.page.page,
                    pageSize:this.page.pageSize,
                    createTime:this.queryForm.createTime,
                    expirationTime:this.queryForm.expirationTime
                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.autoRoleList = res.data.rows;
                        this.page.total = res.data.records;
                    }else {
                        notify(resp)
                    }

                });
            },
            handleSizeChange(val){
                if(this.page.pageSize != val){
                    this.page.pageSize = val;
                    this.initAutoRoleTable();
                }
            },
            handleCurrentChange(val){
                if(this.page.page != val){
                    this.page.page = val;
                    this.initAutoRoleTable();
                }
            },
            getRowClass({ rowIndex }){
                if (rowIndex == 0) {
                    return 'background:RGB(238,239,246)'
                } else {
                    return ''
                }
            },
            openUpdateDialog(row){
                axios.get(domain + "/sysAutoRole/getAutoRoleByUsername",{
                    params:{
                        username:row.username
                    }
                }).then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.updateForm = res.data;
                        this.updateDialogVisible = true;
                    }else {
                        notify(resp)
                    }
                });
            },
            updateAutoRole(){
                // post 传params时，如下，中间用null
                axios.post(domain + "/sysAutoRole/updateAutoRole",this.updateForm).then(resp=>{
                    if (notifyAndReloadAndDialog(this, resp, "initAutoRoleTable", "updateDialogVisible")) {
                        this.updateForm = {};
                    }
                });
            },
            initRoleList(){
                axios.get(domain + "/sysRole/getAllSysRole").then(resp=>{
                    const res = resp.data;
                    if (res.status == 200){
                        this.roleList = res.data;
                    }else {
                        notify(resp)
                    }
                });
            }
        }
    });

</script>
</body>
</html>
